<template>
<!--    <u-skeleton
    	rows="2"
    	:loading="loading"
    	:title="true"
    	:rows="7"
    	rowsHeight="100rpx"
    > -->
        <view class="container">
            <view class="steps-box">
                <u-steps :current="stepCurrent">
                    <u-steps-item title="已支付"></u-steps-item>
                    <u-steps-item title="待自提" ></u-steps-item>
                    <u-steps-item title="已自提"></u-steps-item>
                </u-steps>
            </view>
            
            <view class="addres" v-if="addressData">
                <view class="addres-one">
                    <text class="addres-nickname">{{ $text(addressData.name) }}</text>
                    <text class="addres-tel">{{ $text(addressData.tel) }}</text>
                </view>
                <view class="addres-city">
                    <text>{{ $text(addressData.province) }}</text>
                    <text>{{ $text(addressData.city) }}</text>
                    <text>{{ $text(addressData.county) }}</text>
                    <text>{{ $text(addressData.details) }}</text>
                </view>
            </view>
            
            <view class="shopp-num">
                共{{ $text(detail.sum) }}件商品
            </view>
            
            <view class="shopp">
                <u--image :src="Resource_url + detail.files" width="150rpx" height="150rpx"></u--image>
                <view class="shopp-info">
                    <view class="shopp-title">
                        <view class="shopp-title-text">{{ $text(detail.pr_title) }}</view>
                        <view class="shopp-num-x">
                            <text class="shopp-num-unit">x</text>
                            <text class="shopp-num-num">{{ $text(detail.sum) }}</text>
                        </view>
                    </view>
                    
                    <view class="shopp-ml">
                        {{ $text(detail.sp_title) }}
                    </view>
                    
                    <view class="shopp-price">
                        {{ $text(detail.price) }}<text class="shopp-mini-text">积分</text>
                    </view>
                    
    <!--                <view class="shopp-price">
                        ￥{{ $text(detail.ty_name) }}
                    </view> -->
                </view>
            </view>
            
<!--            <view class="server" @click="$u.vuex.dispatch('user/makePhoneCallServer')">
                <u-icon name="server-fill" size="40rpx" color="#FE2C1D"></u-icon>
                <text class="server-t">联系客服</text>
            </view> -->
            <view class="shopp-detail">
                <view class="shopp-cell">
                    <view class="cell-l">商家名称：</view>
                    <view class="cell-r">
                        {{ $text(distributors.name) }}
                    </view>
                </view>
                <view class="shopp-cell" >
                    <view class="cell-l">商家地址：</view>
                    <view class="cell-r">{{ $text(distributors.address) }}<text class="cell-copy" @click="handleOpen()">导航</text></view>
                    
                </view>
                <view class="shopp-cell" >
                    <view class="cell-l">联系电话：</view>
                    <view class="cell-r">{{ $text(distributors.user_account) }}</view>
                </view>

            </view>
                        
            <view class="shopp-detail">
                <view class="shopp-cell">
                    <view class="cell-l">订单号：</view>
                    <view class="cell-r">
                        {{ $text(detail.order_ddid) }}
                        <text class="cell-copy" @click="copy(detail.order_ddid)">复制</text>
                    </view>
                </view>
<!--                <view class="shopp-cell" v-if="detail.is_zt != 0">
                    <view class="cell-l">快递单号：</view>
                    <view class="cell-r">
                        {{ $text(detail.kd_ddid) }}
                        <text class="cell-copy" @click="copy(detail.kd_ddid)">复制</text>
                    </view>
                </view> -->
                <view class="shopp-cell" v-if="detail.time">
                    <view class="cell-l">下单时间：</view>
                    <view class="cell-r">{{ $text(detail.time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.pay_time">
                    <view class="cell-l">支付时间：</view>
                    <view class="cell-r">{{ $text(detail.pay_time) }}</view>
                </view>
<!--                <view class="shopp-cell" v-if="detail.fh_time">
                    <view class="cell-l">发货时间：</view>
                    <view class="cell-r">{{ $text(detail.fh_time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.sh_time">
                    <view class="cell-l">收货时间：</view>
                    <view class="cell-r">{{ $text(detail.sh_time) }}</view>
                </view> -->
                <view class="shopp-cell" v-if="detail.sh_time">
                    <view class="cell-l">自提时间：</view>
                    <view class="cell-r">{{ $text(detail.sh_time) }}</view>
                </view>
                <view class="shopp-cell" v-if="detail.bz_text" style="display: block;">
                    <view class="cell-l">备注：</view>
                    <u-textarea :value="detail.bz_text" disabled border="none" customStyle="margin-top: 15rpx;" ></u-textarea>
                </view>
<!--                <view class="shopp-cell">
                    <view class="cell-l">支付状态：</view>
                    <view class="cell-r">已支付</view>
                </view> -->
            </view>
            
<!--            <view class="shopp-detail">
                <view class="shopp-cell">
                    <view class="cell-l">商品总价：</view>
                    <view class="cell-r">￥99.00</view>
                </view>
            </view>
            -->
           <view class="actual">
                <text class="actual-label">总积分：</text>
                <text class="actual-val">{{ $text(detail.zong_price) }}</text>
            </view>
            
            <view class="img-box"v-if="detail.ty_files">
                <view class="img-box-title">瓶样图片</view>
                <view class="img-box-img">
                    <u--image :src="Resource_url + detail.ty_files" width="310rpx" height="300rpx" customStyle="margin: 10rpx;" 
                        @click="$u.func.previewImage(0, [Resource_url + detail.ty_files])"></u--image>
                </view>
            </view>
            
<!--            <view class="img-box" v-if="detail.files">
                <view class="img-box-title">DIY图片</view>
                <view class="img-box-img">
                    <u--image :src="Resource_url + detail.files" width="310rpx" height="300rpx" customStyle="margin: 10rpx;" 
                        @click="$u.func.previewImage(0, [Resource_url + detail.files])"></u--image>
                </view>
            </view> -->

        </view>
    <!-- </u-skeleton> -->
</template>

<script>
    import {
        uintegral_order_inone,
        address_one,
        distributors_one
    } from "@/api/useryk.js"
    const app = getApp()
    import {Resource_url, Http_url} from "@/config/config.js"
    /**
     * 检测参数是否不为空 结果与 isNull 相反
     */
    const isNotNull = function(value) {
    	return !isNull(value);
    };
    
    /**
     * 检测参数是否为空 其中 undefined、null、{}、[]、"" 均为空值  true 空值  false 有值
     */
    const isNull = function(value) {
    	let key = false;
    	if (
    		typeof value == "undefined" ||
    		Object.prototype.toString.call(value) == "[object Null]" ||
    		JSON.stringify(value) == "{}" ||
    		JSON.stringify(value) == "[]" ||
    		value === "" ||
    		JSON.stringify(value) === undefined
    	) {
    		key = true;
    	}
    	return key;
    };
	export default {
		data() {
			return {
                Resource_url,
                loading: true,
                addressData: null,
                detail: {},
                gyConfig: app.globalData.gyConfig,
                distributors: {}
			}
		},
        onLoad(params) {
            this.id = params.id
            this.getData()
        },
        computed: {
            stepCurrent(){
                const { is_pay, is_zt } = this.detail
                return {
                    "0": 0,
                    "1": 1,
                    "2": 2,
                }[String(is_zt)]
            },
            users(){
                return this.$store.state.app.userInfou || {}
            }
        },
		methods: {
            $text(text, candidate = ''){
                return isNotNull(text) ? text : isNotNull(candidate) ? candidate : ''
            },
			getData() {
                uni.showLoading({
                    mask: true
                })
				uintegral_order_inone({
					id: this.id,
				}).then(res => {
                    this.detail = res.data
                    this.loading = false
                    uni.hideLoading()
                    
                    
                    // address_one({
                    // 	id: res.data.address_id,
                    // }).then(res => {
                    //     this.addressData = res.data
                    // }).catch(e => {
                    	
                    // })
                    
                   
                    
                    
				}).catch(e => {
                    uni.hideLoading()
					this.$u.toast(e.message || '')
				})
                
				// 查询商家信息
                distributors_one({

                    user_id: this.users.id,
                    jx_uid: this.users.jx_uid
                }).then(res => {
                    this.distributors = res.data
                }).catch(e => {
                	
                })
			},
            copy(text){
                uni.setClipboardData({
                    data: text
                })
            },
            handleOpen() {
                let that = this
                uni.showActionSheet({
                    itemList: ['高德地图', '百度地图', '腾讯地图'],
                    success: function(res) {
                        that.guide(res.tapIndex)
                    },
                    fail: function(res) {
                        console.log(res.errMsg);
                    }
                });
            },
            guide(signMap) {
                uni.showLoading({
                    title: '跳转中'
                });
                const position = {
					latitude: this.distributors.latitude,
					longitude: this.distributors.longitude,
					name: this.distributors.name,
					address: this.distributors.address
				}
                
                if (position.name && position.name != '') {
                    //地点位置position.name 地点经纬度lng lat
                    var lng = position.longitude; //经度39.9
                    var lat = position.latitude;  //纬度116.4
                    if (signMap == 0) {
                        // 高德地图
                        console.log('000')
                        console.log(position.name, lng, lat, '1111')
                        uni.getSystemInfo({
                            
                            success: (res) => {
                                console.log(res)
                                if (res.platform == "android") {
                                    window.location.href =
                                        "androidamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //判断是否跳转
                                    setTimeout(function() {
                                        let hidden = window.document.hidden || window.document
                                            .mozHidden || window.document.msHidden || window.document
                                            .webkitHidden
                                        if (typeof hidden == "undefined" || hidden == false) {
                                            //调用高德地图
                                            window.location.href =
                                                "https://uri.amap.com/marker?position=" + lng + "," +
                                                lat + "&name=" + position.name;
                                        }
                                    }, 2000);
                                } else {
                                    window.location.href =
                                        "iosamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //判断是否跳转
                                    setTimeout(function() {
                                        let hidden = window.document.hidden || window.document
                                            .mozHidden || window.document.msHidden || window.document
                                            .webkitHidden
                                        if (typeof hidden == "undefined" || hidden == false) {
                                            //调用高德地图
                                            window.location.href =
                                                "https://uri.amap.com/marker?position=" + lng + "," +
                                                lat + "&name=" + position.name;
                                        }
                                    }, 2000);
                                }
                            }
                        })
                    } else if (signMap == 1) {
                        // // 百度地图
                        uni.getSystemInfo({
                            success: (res) => {
                                if (res.platform == "android") {
                                    let d = new Date();
                                    let t0 = d.getTime();
                                    window.location.href =
                                        "androidamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
                                    var delay = setInterval(function() {
                                        var d = new Date();
                                        var t1 = d.getTime();
                                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
                                            window.location.href =
                                                "http://api.map.baidu.com/marker?location=" + lat +
                                                "," + lng + "&title=" + position.name +
                                                "&content=地点&output=html&src=webapp.baidu.openAPIdemo";
                                        }
                                        if (t1 - t0 >= 3000) {
                                            clearInterval(delay);
                                        }
                                    }, 1000);
                                } else {
                                    let d = new Date();
                                    let t0 = d.getTime();
                                    window.location.href =
                                        "iosamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //由于打开需要1～2秒，利用这个时间差来处理－－打开app后，返回h5页面会出现页面变成app下载页面，影响用户体验
                                    let delay = setInterval(function() {
                                        var d = new Date();
                                        var t1 = d.getTime();
                                        if (t1 - t0 < 3000 && t1 - t0 > 2000) {
                                            window.location.href =
                                                "http://api.map.baidu.com/marker?location=" + lat +
                                                "," + lng + "&title=" + position.name +
                                                "&content=地点&output=html&src=webapp.baidu.openAPIdemo";
                                        }
                                        if (t1 - t0 >= 3000) {
                                            clearInterval(delay);
                                        }
                                    }, 1000);
                                }
                            }
                        })
                    } else {
                        // // 腾讯地图
                        uni.getSystemInfo({
                            success: (res) => {
                                if (res.platform == "android") {
                                    window.location.href =
                                        "androidamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //判断是否跳转
                                    setTimeout(function() {
                                        let hidden = window.document.hidden || window.document
                                            .mozHidden || window.document.msHidden || window.document
                                            .webkitHidden
                                        if (typeof hidden == "undefined" || hidden == false) {
                                            //调用腾讯地图
                                            window.location.href =
                                                `https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
                                        }
                                    }, 2000);
                                } else {
                                    window.location.href =
                                        "iosamap://viewMap?sourceApplication=appname&poiname=" + position
                                        .name + "&lat=" + lat + "&lon=" + lng + "&dev=0";
                                    //判断是否跳转
                                    setTimeout(function() {
                                        let hidden = window.document.hidden || window.document
                                            .mozHidden || window.document.msHidden || window.document
                                            .webkitHidden
                                        if (typeof hidden == "undefined" || hidden == false) {
                                            //调用高德地图
                                            window.location.href =
                                                `https://apis.map.qq.com/uri/v1/marker?marker=coord:(${lat},${lng})&addr:${position.name}`
                                        }
                                    }, 2000);
                                }
                            }
                        })
                    }
                } else {
                    uni.showToast({
                        title: '暂不知道该地点位置',
                        icon: 'none',
                        duration: 2000,
                    });
                }
            }

		}
	}
</script>

<style lang="scss" scoped>
    @import '@/libs/PublicStyle.scss';
    page{
        background-color: #F6F6F6;
    }
	.container{
      
        
        .steps-box{
            background-color: #ffffff;
            padding: 40rpx 0 20rpx 0;
        }
        
        .addres{
            padding: 40rpx 40rpx;
            margin-top: 22rpx;
            background-color: #ffffff;
            
            .addres-nickname,
            .addres-tel{
                font-size: 30rpx;
            }
            
            .addres-tel{
                margin-left: 40rpx;
            }
            
            .addres-city{
                margin-top: 10rpx;
                
                text{
                    margin-right: 12rpx;
                    color: #868686;
                    font-size: 28rpx;
                }
            }
        }
        
        .shopp-num{
            padding: 20rpx 40rpx ;
            margin-top: 18rpx;
            background-color: #ffffff;
            line-height: 60rpx;
            font-size: 30rpx;
        }
        
        .shopp{
            display: flex;
            margin-top: 2rpx;
            padding: 40rpx;
            background-color: #ffffff;
            
            .shopp-info{
                flex: 1;
                width: 0;
                margin-left: 30rpx;
                
                .shopp-title{
                    display: flex;
                    
                    .shopp-title-text{
                        flex: 1;
                        font-size: 30rpx;
                    }
                    
                    .shopp-num-x{
                        
                        .shopp-num-unit{
                            font-size: 22rpx;
                            color: #888888;
                        }
                        
                        .shopp-num-num{
                            font-size: 28rpx;
                            color: #888888;
                        }
                        
                        text{
                            vertical-align: bottom;
                        }
                    }
                }
                
                .shopp-ml{
                    margin-top: 10rpx;
                    font-size: 24rpx;
                    color: #888888;
                }
                
                .shopp-price{
                    margin-top: 10rpx;
                    font-size: 30rpx;
                    color: #FE2C1D;
                }
                
                .shopp-mini-text{
                    font-size: 24rpx;
                }
            }
        }
        
        .server{
            display: flex;
            justify-content: center;
            align-items: center;
            margin-top: 2rpx;
            padding: 40rpx;
            background-color: #ffffff;
            .server-t{
                text-align: 30rpx;
                 color: #FE2C1D;
                margin-left: 15rpx;
            }
        }
        
        .shopp-detail{
            padding: 20rpx 40rpx;
            margin-top: 22rpx;
            background-color: #ffffff;
            
            .shopp-cell{
                display: flex;
                justify-content: space-between;
                margin: 10rpx 0;
                line-height: 50rpx;
                
                .cell-l{
                    font-size: 30rpx;
                    margin-right: 15rpx;
                }
                
                .cell-r{
                    font-size: 30rpx;
                    color: #868686;
                }
                
                .cell-copy{
                    display: inline-block;
                    padding: 3rpx 20rpx;
                    margin-left: 20rpx;
                    font-size: 24rpx;
                    line-height: 30rpx;
                    color: #676767;
                    border: 1px solid #676767;
                    border-radius: 1rpx;
                }
            }
        }
        
        .actual{
            margin-top: 2rpx;
            padding: 40rpx;
            text-align: right;
            background-color: #ffffff;
            
            .actual-label,
            .actual-val{
                font-size: 30rpx;
                color: #FE2C1D;
            }
            
            .actual-label{
                margin-right: 20rpx;
            }
        }
        
        .img-box{
            margin-top: 22rpx;
            padding: 40rpx;
            
            background-color: #ffffff;
            
            .img-box-title{
                font-size: 30rpx;
                margin-bottom: 20rpx;
            }
            
            .img-box-img{
                display: flex;
                flex-wrap: wrap;
            }
        }
    }
</style>